<template>
  <div class="footer">
    <span
      v-for="item in menuItems"
      :key="item.name"
      class="footer-btn"
      @click="handleSwitch(item.name)"
    >
      <div :class="activeName === item.name ? 'is-active' : ''" class="menu-light"></div>
      <div :style="activeName === item.name ? 'color:#ffffff' : ''" class="menu-label">
        {{ item.label }}
      </div>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      menuItems: [
        { name: 'first', label: '设备概览' },
        { name: 'second', label: '分拣教程' },
        { name: 'three', label: '辖分数据' },
        { name: 'four', label: '其他数据' },
      ],
    };
  },
  methods: {
    handleSwitch(name) {
      this.activeName = name;
      this.$emit('switch', name);
    },
  },
};
</script>

<style scoped lang="less">
.footer {
  background: #080f15;
  z-index: 999;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6%;
  overflow: hidden;
  box-shadow: 0 -3px 0 0 rgba(255, 255, 255, 0.3);
}

.footer-btn {
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.6);
}

.footer-btn:hover {
  color: #ffffff;
}

.menu-label {
  padding: 24px;
}

.menu-light {
  position: absolute;

  transition: box-shadow 0.3s;
  height: 4px;
  visibility: hidden;
  width: 60%;
  margin: auto;
  left: 20%;
  top: -2px;
}

.is-active {
  // visibility: visible;
  // width: 60%;
  // margin: auto;
  // background-color: #ffffff;
  // box-shadow: 0px 0px 15px 8px rgba(255, 255, 255, 0.5), 20px 12px 20px 8px rgba(255, 255, 255, 0.2),
  //   -20px 12px 20px 8px rgba(255, 255, 255, 0.2);
  visibility: visible;
  background-color: #ffffff;
  box-shadow: 0px 0px 15px 8px rgba(255, 255, 255, 0.5), 20px 12px 20px 8px rgba(255, 255, 255, 0.2),
    -20px 12px 20px 8px rgba(255, 255, 255, 0.2);
}
</style>
